<!DOCTYPE html>
<!-- saved from url=(0042)http://www.jq22.com/demo/exam201706151510/ -->
<html>
<head lang="zh-CN">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>学习工坊--响应式实现方式练习场</title>
<link href="index5/css/base.css" rel="stylesheet" type="text/css">
<link href="index5/css/home.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css3/bootstrap.min.css">

	<style type="text/css">

		.a1{width:40%;margin: 0 auto;padding-top:30px; }
		@media (max-width: 768px) {
			.a1{width:100%}
		 }
		@media (min-width: 768px) and (max-width: 992px) {
			.a1{width:60%}
		}
		.navbar-brand{padding: 0 15px;}
		.navbar-brand img{height: 50px;}
.breadcrumb,.navbar{margin-bottom: 10px}



.clear {
	clear: both
	}
.RadioStyle input {
	display: none
	}
.RadioStyle label {
	border: 1px solid #CCC;
	color: #666;
	padding: 2px 10px 2px 5px;
	line-height: 28px;
	min-width: 80px;
	text-align: center;
	float: left;
	margin: 2px;
	border-radius: 4px
	}
.RadioStyle input:checked + label {
	background: url(index5/img/ico_checkon.svg) no-repeat right bottom;
	border: 1px solid #00a4ff;
	background-size: 21px 21px;
	color: #00a4ff
	}
.RadioStyle input:disabled + label {
	opacity: 0.7;
	}
	.pad,.pad1{width: 80%}
	.phone,.phone1{width: 50%}
.panel-body img{width: 100%;}
	</style>

</head>
<body style="background: rgb(246, 246, 246); min-height: 589px;">
<nav class="navbar navbar-default navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html"><img src="css3/logo.png" ></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
      	<li><a href="#">网站规划</a></li>
		<li><a href="#">网站首页模块</a></li>
		<li><a href="#">网站二级页模块</a></li>
		<li><a href="#">网站内容页模块</a></li>      
        <li class="active"><a href="#">响应式网站模块</a></li>
		<li><a href="#">综合训练模块</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">返回学习工坊首页</a></li>       
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
			<ol class="breadcrumb">
			  <li><a href="index.html">首页</a></li>
			  <li><a href="index.html">响应式网站模块</a></li>
			  <li class="active">响应式实现方式练习场</li>
			</ol>




<div class="index-page">
	<div class="solution-more">
		<div class="solution-more-slide">
			<div class="container">
				<div class="hd">
					<ul>
						<li class="item-3 on">
							<i></i>
							<div class="text">
								<h3>布局变化</h3>
								<p>实现整体布局调整</p>
							</div>
						</li>
						<li class="item-5">
							<i></i>
							<div class="text">
								<h3>拉伸规则</h3>
								<p>满足内容的细节调整需求</p>
							</div>
						</li>
					</ul>
				</div>
				<ul class="bd">
					<li class="item-1" >
						<div class="container">
							<div class="inner">
								<h2>布局变化方案</h2>
								<dl class="intro">
									<dt>请选择布局变化方式</dt>
									<dd>
										
										<div class="RadioStyle">
    <div class="Block PaddingL">
        <input type="radio" name="Storage" id="model1"  checked/>
        <label for="model1">模块位置变化</label>
        <input type="radio" name="Storage" id="model2" />
        <label for="model2">模块展示方式变化</label>
        <input type="radio" name="Storage" id="model3" />
        <label for="model3">模块数量变化</label>
      
    </div>
</div>
<br>
									</dd>
									<dt>效果展示</dt>
									<dd>
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseOne">
                PC端效果
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body ">
            	<div class="pc">
            		<img src="index5/img/1.png">
            	</div>
                
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseTwo">
                平板端效果
            </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
        	<div class="pad">
        		 <img src="index5/img/2.png">
        	</div>
          
        </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseThree">
                手机端效果
                </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
              <div class="phone">
               <img src="index5/img/2.png">
              </div>
            </div>
        </div>
    </div>
</div>



									</dd>
								</dl>
								<div class="btn-wrap">
									<a href="javascript:;">了解详情</a>
									<a href="javascript:;" class="btn-2">获取示例代码</a>
								</div>

							</div>
						</div>
					</li>
					<li class="item-2">
						<div class="container">
							<div class="inner">
								<h2>内容拉伸规则</h2>
								<dl class="intro">
									<dt>第一步：请选伸拉伸对象</dt>
									<dd>

<div class="RadioStyle">
    <div class="Block PaddingL">
        <input type="radio" name="Storage1" id="model4"  checked/>
        <label for="model4">文本</label>
        <input type="radio" name="Storage1" id="model5" />
        <label for="model5">图片</label>
      
    </div>
</div>
<br>

									</dd>
									<dt >第二步：选择拉伸方法</dt>
									<dd>
	<div class="RadioStyle qa1">
	    <div class="Block PaddingL">
	        <input type="radio" name="Storage2" id="model7"  checked/>
	        <label for="model7">内容无增减拉伸</label>
	        <input type="radio" name="Storage2" id="model8" />
	        <label for="model8">等高文本截取</label>
	         <input type="radio" name="Storage2" id="model11" />
	        <label for="model11">改变字体大小</label>
	       
	    </div>
	</div>
	
	<div class="RadioStyle qa2">
	    <div class="Block PaddingL">
	        <input type="radio" name="Storage3" id="model9"  checked/>
	        <label for="model9">等比拉伸</label>
	        <input type="radio" name="Storage3" id="model10" />
	        <label for="model10">等高宽度裁剪</label>	   
	        <input type="radio" name="Storage3" id="model12" />
	        <label for="model12">其他图片替换</label>	       
	    </div>
	</div>
	<br>
									</dd>
									<dt>效果展示</dt>
									<dd>

<div class="panel-group" id="accordion1">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion1" 
                href="#collapseOne1">
                PC端效果
                </a>
            </h4>
        </div>
        <div id="collapseOne1" class="panel-collapse collapse in">
            <div class="panel-body ">
            	<div class="pc1">
            		<img src="index5/img/7.png">
            	</div>
                
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion1" 
                href="#collapseTwo1">
                移动端效果
            </a>
            </h4>
        </div>
        <div id="collapseTwo1" class="panel-collapse collapse">
        <div class="panel-body">
        	<div class="phone1">
        		 <img src="index5/img/8.png">
        	</div>
          
        </div>
        </div>
    </div>
   
</div>




									</dd>
								</dl>
								<div class="btn-wrap">
									<a href="javascript:;">了解详情</a>
									<a href="javascript:;" class="btn-2">获取示例代码</a>
								</div>
						
							</div>
						</div>
					</li>
					
				</ul>
			</div>
		</div>
	</div>
</div>


			
<script src="index/jquery.min.js"></script>
<script src="index5/bootstrap.min.js"></script>
<script type="text/javascript" src="index5/js/SuperSlide.js"></script>



<script type="text/javascript">
	$(".solution-more-slide").slide({
		effect: 'fold'
	});
	
	$(function(){
		$("body").css("min-height",document.documentElement.clientHeight);
	$('.qa2').hide();
		$('#model1').click(function(){
			$('.pc img').attr('src','index5/img/1.png');
			$('.pad img').attr('src','index5/img/2.png');
			$('.phone img').attr('src','index5/img/2.png');
		})
		$('#model2').click(function(){
			$('.pc img').attr('src','index5/img/3.png');
			$('.pad img').attr('src','index5/img/4.png');
			$('.phone img').attr('src','index5/img/4.png');
		})
		$('#model3').click(function(){
			$('.pc img').attr('src','index5/img/5.png');
			$('.pad img').attr('src','index5/img/6.png');
			$('.phone img').attr('src','index5/img/6.png');
		})

		$('#model4').click(function(){
			
			$('.qa2').hide();
			$('.qa1').show();
		})
		$('#model5').click(function(){
		
			$('.qa1').hide();
			$('.qa2').show();

			$('.pc1 img').attr('src','index5/img/11.png');		
			$('.phone1 img').attr('src','index5/img/12.png');
		})
	
		$('#model7').click(function(){
        	//文本
        	$('.pc1 img').attr('src','index5/img/7.png');		
			$('.phone1 img').attr('src','index5/img/8.png');
		})
		$('#model8').click(function(){
			$('.pc1 img').attr('src','index5/img/7.png');		
			$('.phone1 img').attr('src','index5/img/9.png');
		})
		$('#model11').click(function(){
         //变字体
            $('.pc1 img').attr('src','index5/img/7.png');		
			$('.phone1 img').attr('src','index5/img/10.png');
		})
		$('#model9').click(function(){
			//图片
			$('.pc1 img').attr('src','index5/img/11.png');		
			$('.phone1 img').attr('src','index5/img/12.png');
		})
		$('#model10').click(function(){
			$('.pc1 img').attr('src','index5/img/11.png');		
			$('.phone1 img').attr('src','index5/img/13.png');
		})
		$('#model12').click(function(){
			$('.pc1 img').attr('src','index5/img/11.png');		
			$('.phone1 img').attr('src','index5/img/14.png');
		})


	});
	
</script>

</body></html>